<template>
  <div class="breed-detail-page">
    <!-- 宠物品种详情头部 -->
    <div class="detail-header">
      <div class="detail-banner">
        <img :src="breed.image" :alt="breed.name" class="detail-image" />
        <div class="detail-overlay">
          <h1>{{ breed.name }}</h1>
          <div class="breed-category-badge">{{ breed.category }}</div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="detail-content">
      <div class="detail-container">
        <!-- 左侧内容：品种介绍 -->
        <div class="detail-main">
          <!-- 品种介绍 -->
          <section class="introduction-section">
            <h2>品种介绍</h2>
            <p class="introduction-text">{{ breed.description }}</p>
          </section>
          
          <!-- 性格特点 -->
          <section class="characteristics-section">
            <h2>性格特点</h2>
            <div class="characteristics-grid">
              <div v-for="trait in breed.characteristics" :key="trait" class="characteristic-item">
                <div class="trait-icon">
                  <HeartIcon />
                </div>
                <span class="trait-name">{{ trait }}</span>
              </div>
            </div>
          </section>
          
          <!-- 饲养建议 -->
          <section class="care-section">
            <h2>饲养建议</h2>
            <div class="care-tips">
              <div class="care-tip">
                <h3>饮食需求</h3>
                <p>{{ breed.care.diet }}</p>
              </div>
              <div class="care-tip">
                <h3>运动需求</h3>
                <p>{{ breed.care.exercise }}</p>
              </div>
              <div class="care-tip">
                <h3>健康护理</h3>
                <p>{{ breed.care.health }}</p>
              </div>
            </div>
          </section>
          
          <!-- 图片展示 -->
          <section class="gallery-section">
            <h2>更多照片</h2>
            <div class="image-gallery">
              <div v-for="(image, index) in breed.gallery" :key="index" class="gallery-image">
                <img :src="image" :alt="`${breed.name} 照片 ${index + 1}`" />
              </div>
            </div>
          </section>
        </div>
        
        <!-- 右侧边栏：基本信息 -->
        <div class="detail-sidebar">
          <div class="info-card">
            <h3>基本信息</h3>
            <div class="info-item">
              <span class="info-label">原产地：</span>
              <span class="info-value">{{ breed.origin }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">平均寿命：</span>
              <span class="info-value">{{ breed.lifespan }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">体重范围：</span>
              <span class="info-value">{{ breed.weight }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">身高范围：</span>
              <span class="info-value">{{ breed.height }}</span>
            </div>
          </div>
          
          <div class="info-card">
            <h3>适合人群</h3>
            <div class="suitable-for">
              <div v-for="person in breed.suitableFor" :key="person" class="suitable-item">
                <span>{{ person }}</span>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <button class="btn-favorite" @click="toggleFavorite">
              <HeartIcon :filled="isFavorite" />
              {{ isFavorite ? '已收藏' : '收藏' }}
            </button>
            <button class="btn-share">
              <ShareIcon />
              分享
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import HeartIcon from '@/components/icons/HeartIcon.vue'
import ShareIcon from '@/components/icons/ShareIcon.vue'

// 获取路由参数
const route = useRoute()
const breedId = parseInt(route.params.id)

// 收藏状态
const isFavorite = ref(false)

// 模拟宠物品种数据
const breed = ref({
  id: breedId,
  name: '',
  category: '',
  image: '',
  description: '',
  characteristics: [],
  origin: '',
  lifespan: '',
  weight: '',
  height: '',
  care: {
    diet: '',
    exercise: '',
    health: ''
  },
  gallery: [],
  suitableFor: []
})

// 模拟数据 - 可以根据ID加载不同品种的数据
const loadBreedData = () => {
  // 这里模拟根据ID获取不同品种的数据
  const breedDataMap = {
    1: {
      id: 1,
      name: '金毛寻回犬',
      category: '大型犬',
      image: '@/assets/pixel-pets.png',
      description: '金毛寻回犬是一种非常友好、可靠和值得信赖的犬种。它们聪明、容易训练，对孩子特别友善，是理想的家庭宠物。金毛犬最初是为了猎捕水禽而培育的，因此它们通常喜欢水，并且擅长游泳。',
      characteristics: ['友善', '可靠', '聪明', '活泼', '耐心'],
      origin: '英国',
      lifespan: '10-12年',
      weight: '27-36公斤',
      height: '51-61厘米',
      care: {
        diet: '金毛犬需要均衡的饮食，包括高质量的蛋白质、碳水化合物和健康的脂肪。幼犬应选择专门为大型犬设计的幼犬粮，成年后则转为适合大型犬的成犬粮。',
        exercise: '金毛犬需要每天至少30-60分钟的运动，包括散步、跑步和游戏。它们也喜欢参与各种活动，如敏捷训练、服从训练或寻回游戏。',
        health: '金毛犬容易出现髋关节发育不良、肘关节发育不良和某些眼部问题。定期兽医检查、适当的营养和运动可以帮助预防这些问题。'
      },
      gallery: [
        '@/assets/pixel-pets.png',
        '@/assets/2.png',
        '@/assets/Hero.png'
      ],
      suitableFor: ['有孩子的家庭', '活跃的个人或家庭', '首次养狗的人', '有其他宠物的家庭']
    },
    2: {
      id: 2,
      name: '布偶猫',
      category: '大型猫',
      image: '@/assets/pixel-cats.png',
      description: '布偶猫是一种温顺、友好的大型猫种。它们以其柔软的长毛、蓝色的眼睛和温和的性格而闻名。布偶猫通常非常安静，喜欢与人互动，并且对疼痛有较高的忍耐力，这使它们成为有孩子的家庭的理想选择。',
      characteristics: ['温顺', '友好', '安静', '亲人', '忍耐'],
      origin: '美国',
      lifespan: '12-16年',
      weight: '4.5-9公斤',
      height: '25-30厘米',
      care: {
        diet: '布偶猫需要高质量的猫粮，含有足够的蛋白质和健康的脂肪。应根据年龄、体重和活动水平调整食物量。',
        exercise: '虽然布偶猫相对安静，但它们仍然需要定期的玩耍和互动来保持健康。提供猫树、玩具和互动游戏可以帮助满足它们的活动需求。',
        health: '布偶猫容易出现肥厚性心肌病和多囊肾病等健康问题。定期兽医检查、适当的饮食和避免过度肥胖可以帮助预防这些问题。'
      },
      gallery: [
        '@/assets/pixel-cats.png',
        '@/assets/1.png',
        '@/assets/3.png'
      ],
      suitableFor: ['有孩子的家庭', '安静的家庭', '有其他宠物的家庭', '独居者']
    },
    // 可以添加更多品种的数据
  }
  
  // 如果找不到对应ID的品种，使用默认的金毛寻回犬数据
  breed.value = breedDataMap[breedId] || breedDataMap[1]
}

// 切换收藏状态
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value
  // 这里可以添加收藏逻辑，如保存到本地存储或API调用
}

// 组件挂载时加载数据
onMounted(() => {
  loadBreedData()
})
</script>

<style scoped>
/* 全局样式变量 - 像素风 */
:root {
  --primary-color: #ff7f00;
  --primary-hover: #e66f00;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --background-light: #f0e8d0;
  --white: #ffffff;
  --border-color: #333;
  --pixel-border: 2px solid #333;
  --pixel-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  --pixel-radius: 0;
  --transition: all 0.2s ease;
}

/* 页面整体样式 */
.breed-detail-page {
  min-height: 100vh;
  background-color: var(--background-light);
  background-image: url('');
  font-family: 'Press Start 2P', monospace;
}

/* 详情页头部 */
.detail-header {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-bottom: var(--pixel-border);
}

.detail-banner {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-bottom: var(--pixel-border);
}

.detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
  filter: brightness(0.7);
}

.detail-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  color: var(--white);
  text-shadow: 2px 2px 0 #000;
}

.detail-overlay h1 {
  font-size: 28px;
  margin: 0 0 16px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.breed-category-badge {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white);
  padding: 8px 16px;
  border: 2px solid #000;
  font-size: 12px;
  font-weight: normal;
  transform: rotate(-1deg);
  box-shadow: 2px 2px 0 #000;
}

/* 主要内容区域 */
.detail-content {
  margin-top: -40px;
  position: relative;
  z-index: 1;
}

.detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

/* 左侧主要内容 */
.detail-main {
  background-color: var(--white);
  border: var(--pixel-border);
  box-shadow: var(--pixel-shadow);
  padding: 20px;
  transform: rotate(0.5deg);
}

/* 各部分标题 */
.detail-main h2 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 介绍部分 */
.introduction-section {
  margin-bottom: 30px;
}

.introduction-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  text-shadow: 0.5px 0.5px 0 rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

/* 性格特点 */
.characteristics-section {
  margin-bottom: 30px;
}

.characteristics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
}

.characteristic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background-color: rgba(255, 127, 0, 0.1);
  border: 2px solid #000;
  transition: var(--transition);
  transform: rotate(-1deg);
}

.characteristic-item:hover {
  background-color: rgba(255, 127, 0, 0.2);
  transform: rotate(-1deg) translate(2px, -2px);
}

.trait-icon {
  margin-bottom: 8px;
  color: var(--primary-color);
}

.trait-name {
  font-size: 10px;
  font-weight: normal;
  color: var(--text-primary);
  text-align: center;
}

/* 饲养建议 */
.care-section {
  margin-bottom: 30px;
}

.care-tips {
  display: grid;
  gap: 15px;
}

.care-tip {
  padding: 15px;
  background-color: #fff9e6;
  border: 2px solid #000;
  border-left: 4px solid var(--primary-color);
  transform: rotate(0.5deg);
}

.care-tip h3 {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.care-tip p {
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.5px;
}

/* 图片展示 */
.gallery-section {
  margin-bottom: 15px;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.gallery-image {
  border: 2px solid #000;
  overflow: hidden;
  transition: var(--transition);
  transform: rotate(-1deg);
}

.gallery-image:hover {
  transform: rotate(-1deg) translate(2px, -2px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.gallery-image img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  image-rendering: pixelated;
}

/* 右侧边栏 */
.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 信息卡片 */
.info-card {
  background-color: var(--white);
  border: var(--pixel-border);
  box-shadow: var(--pixel-shadow);
  padding: 15px;
  transform: rotate(-0.5deg);
}

.info-card h3 {
  font-size: 14px;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-color);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: normal;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.info-value {
  color: var(--text-primary);
  font-weight: normal;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* 适合人群 */
.suitable-for {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.suitable-item {
  padding: 6px 10px;
  background-color: #f0f0f0;
  border: 1px solid #000;
  font-size: 10px;
  color: var(--text-primary);
  transform: rotate(0.5deg);
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-favorite,
.btn-share {
  padding: 10px 15px;
  border: 2px solid #000;
  background-color: var(--white);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: normal;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 2px 2px 0 #000;
  transform: rotate(-1deg);
  position: relative;
  overflow: hidden;
}

.btn-favorite:hover,
.btn-share:hover {
  transform: rotate(-1deg) translate(-2px, 2px);
  box-shadow: 4px 4px 0 #000;
}

.btn-favorite:active,
.btn-share:active {
  transform: rotate(-1deg) translate(0, 0);
  box-shadow: 1px 1px 0 #000;
}

.btn-favorite {
  background-color: #ff9999;
}

.btn-favorite:hover {
  background-color: #ff6666;
}

.btn-share {
  background-color: #99ccff;
}

.btn-share:hover {
  background-color: #66aaff;
}

/* 像素风滚动条 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--background-light);
  border: 2px solid #000;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border: 2px solid #000;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-hover);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .detail-container {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .detail-sidebar {
    order: 1;
  }
  
  .detail-main {
    order: 2;
  }
}

@media (max-width: 768px) {
  .detail-banner {
    height: 250px;
  }
  
  .detail-overlay {
    padding: 20px;
  }
  
  .detail-overlay h1 {
    font-size: 20px;
  }
  
  .detail-main {
    padding: 15px;
  }
  
  .characteristics-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  
  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .gallery-image img {
    height: 100px;
  }
}

@media (max-width: 480px) {
  .detail-overlay h1 {
    font-size: 18px;
  }
  
  .detail-container {
    padding: 0 10px;
  }
  
  .detail-main h2 {
    font-size: 16px;
  }
}
</style>